<template>
  <view class="test-calculate">
    <view class="top-box">
      <view class="top-bg"></view>
      <view class="title-box">
        <image class="title-icon" src="/static/image/calc-icon.png"></image>
        <view class="title">快来测测每年可以节约多少电费吧~</view>
      </view>
    </view>
    <view class="report-content">
      <view class="section-title"><view class="title">基本信息</view></view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-name">项目性质</view>
          <view class="item-content">
            <uni-data-select class="input" :clear="false" v-model="currProjectType" :localdata="projectTypeList" placeholder="请选择项目性质"></uni-data-select>
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">亮灯时长</view>
          <view class="item-content">
            <input type="digit" placeholder="请输入亮灯时长" v-model="testDuration" maxlength="10" />
            <view class="suffix-unit large">小时</view>
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">灯具数量</view>
          <view class="item-content">
            <input type="number" placeholder="请输入灯具数量" v-model="lampCount" maxlength="10" />
            <view class="suffix-unit">盏</view>
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">标准电价</view>
          <view class="item-content">
            <input type="digit" placeholder="请输入标准电价" v-model="powerPrice" maxlength="10" />
            <view class="suffix-unit large">元/度</view>
          </view>
        </view>
      </view>

      <view class="section-title"><view class="title">原有灯具</view></view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-name">灯具功率</view>
          <view class="item-content">
            <input type="digit" placeholder="灯具功率" v-model="prevLampKWH" maxlength="10" />
            <view class="suffix-unit">W</view>
          </view>
        </view>
      </view>

      <view class="section-title"><view class="title">改造灯具</view></view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-name">灯具功率</view>
          <view class="item-content">
            <input type="digit" placeholder="灯具功率" v-model="testLampKWH" maxlength="10" />
            <view class="suffix-unit">W</view>
          </view>
        </view>
      </view>

      <view class="section-title"><view class="title">亮度设置</view></view>
      <view class="form-box">
        <view class="form-item">
          <view class="item-name">高亮(%)</view>
          <view class="item-content">
            <uni-number-box :min="1" :max="100" v-model="highlightRate" />
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">低亮(%)</view>
          <view class="item-content">
            <uni-number-box :min="1" :max="100" v-model="lowlightRate" />
          </view>
        </view>
      </view>
    </view>
    <view v-show="isShowResult" class="report-result">
      <view class="chart-box">
        <qiun-data-charts type="arcbar" :opts="chartOptions" :chartData="chartData" />
        <view class="info-text">
          <view class="info-title">预估年节约电费：</view>
          <view class="test-result">{{ annualSavingMoney }}</view>
        </view>
      </view>
    </view>
    <view class="btn-box"><view class="btn-item primary" @click="doCalc()">开始计算</view></view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { CONFIG } from '@/envs/_/config'
import { formatDate, fixedDecimal, getImagePath, getDateDiff, getAnnualNumber } from '@/utils/index.js'
import color from '@/envs/_/variables.scss'
const chooseLocation = requirePlugin('chooseLocation')
export default {
  mixins: [mixin],
  data() {
    return {
      isShowResult: false,
      lampCount: '1000',
      currProjectType: '',
      powerPrice: '',
      savingRate: '',
      testDuration: '24',
      prevLampKWH: '18',
      testLampKWH: '18',
      highlightRate: 50,
      lowlightRate: 0,
      chartOptions: {
        color: [color.primary],
        padding: undefined,
        title: {
          name: '80%',
          fontSize: 30,
          color: color.textMain
        },
        subtitle: {
          name: '预计节能率',
          fontSize: 12,
          color: color.textMain
        },
        extra: {
          arcbar: {
            type: 'default',
            width: 12,
            backgroundColor: color.primaryLighter,
            startAngle: 0.75,
            endAngle: 0.25,
            gap: 2
          }
        }
      },
      chartData: {},
      annualSavingMoney: ''
    }
  },
  mounted() {
  },
  methods: {
    setChartData(saveRate) {
      this.chartOptions.title.name = `${fixedDecimal(saveRate * 100, 1)}%`
      this.chartOptions = JSON.parse(JSON.stringify(this.chartOptions))
      this.chartData = {
        series: [
          {
            name: '节能率',
            color: color.primary,
            data: fixedDecimal(saveRate, 1)
          }
        ]
      }
    },
    doCalc() {
      if (this.checkCompleted()) {
        this.calcResult()
      } else {
        uni.showToast({
          icon: 'none',
          title: '请完成录入再计算'
        })
      }
    },
    checkCompleted() {
      const self = this
      const priceCompleted = !!self.powerPrice
      const timeCompleted = self.testDuration
      const countCompleted = self.lampCount
      const recordCompleted = self.prevLampKWH && self.testLampKWH
      const settingCompleted = self.highlightRate && self.lowlightRate
      console.log(`priceCompleted: ${priceCompleted}, timeCompleted: ${timeCompleted}, countCompleted: ${countCompleted}, recordCompleted: ${recordCompleted}, settingCompleted: ${settingCompleted}`)
      return priceCompleted && timeCompleted && countCompleted && recordCompleted && settingCompleted
    },
    calcResult() {
      const self = this
      let saveRate = 1 - self.testLampKWH * (self.highlightRate + self.lowlightRate) / 2 / 100 / self.prevLampKWH
      saveRate = Math.max(0, saveRate)
      self.setChartData(saveRate)
      self.annualSavingMoney = getAnnualNumber(self.lampCount * self.prevLampKWH * saveRate / 1000 * self.powerPrice)
      self.isShowResult = true
    }
  }
}
</script>

<style lang="scss" scoped>
.test-calculate {
  padding: 30rpx 30rpx 60rpx;
  min-height: 100vh;
}
.top-box {
  position: relative;
  padding-top: 10rpx;
  padding-bottom: 30rpx;
  .top-bg {
    position: absolute;
    top: -30rpx;
    left: -30rpx;
    right: -30rpx;
    width: 750rpx;
    height: 420rpx;
    background-color: $primary;
  }
  .title-box {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    .title-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 25rpx;
    }
    .title {
      border-radius: 10px 10px 10px 4px;
      padding: 15rpx 25rpx;
      font-size: $font-size-4;
      background-color: $background-primary-light;
    }
  }
}
.section-title {
  @include section-title;
  .title {
    color: $primary;
  }
}
.form-box {
  + .section-title {
    margin-top: 50rpx;
  }
}
.report-content {
  position: relative;
  z-index: 2;
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx 30rpx 70rpx;
  .btn-box {
    justify-content: center;
  }
}
.item-name {
  font-size: $font-size-3;
  font-weight: bold;
}
.item-content {
  font-size: $font-size-2;
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
  width: 360rpx;
  input,
  .input {
    flex: 1;
  }
  /deep/ {
    .uni-date-x,
    .uni-select__input-placeholder {
      font-size: $font-size-2;
    }
  }
  .suffix-icon {
    flex: none;
    width: 44rpx;
    &.location {
      color: $success;
    }
  }
  .suffix-unit {
    flex: none;
    width: 44rpx;
    &.large {
      width: 72rpx;
    }
  }
}
.form-item {
  padding: 32rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid $border-base;
}
.report-result {
  margin-top: 20rpx;
  background-color: $white;
  border-radius: 10rpx;
  padding: 50rpx 30rpx;
  .chart-box {
    position: relative;
    .info-text {
      font-size: $font-size-2;
      display: flex;
      align-items: center;
      justify-content: center;
      .info-title {
        color: $text-secondary;
      }
      .test-result {
        color: $danger;
      }
    }
  }
}

.btn-box {
  margin-top: 50rpx;
  display: flex;
  .btn-item {
    border-radius: 10rpx;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-3;
    color: $white;
    font-weight: bold;
    background-color: $primary;
  }
}
</style>
